<template>
	<view class="container container01">
		<!--头部start-->
		<view class="header">
			<u-status-bar></u-status-bar>
			<view class="con">
				<image src="/static/images/back.png" mode="widthFix" class="back"></image>
				<view class="tit">&nbsp;</view>
			    <view class="h_zx" v-show="h_show_dxy" @tap="open_revoke_box"><image src="/static/images/g_img26.png" mode="widthFix"></image>撤销订单</view>
				<view class="h_zx h_dfk" v-show="h_show_dfk" @tap="open_termination_box"><image src="/static/images/img_93.png" mode="widthFix"></image>解除交易</view>
				<view class="h_zx h_ss" v-show="h_show_ss" @tap="open_appeal_box"><image src="/static/images/img_95.png" mode="widthFix"></image>申诉</view>
				<view class="h_zx h_ssjl" v-show="h_show_ssjl"><image src="/static//images/img_66.png" mode="widthFix"></image>申诉记录</view>
				<view class="h_zx h_zcmx" v-show="h_show_zcmx"><image src="/static//images/img_96.png" mode="widthFix"></image>资产明细</view>
			</view>
		</view>
		<u-status-bar></u-status-bar>
		<!--头部end-->
		
		<!--详情start-->
		<view class="order_detial">
			<view class="state">
				<image src="/static/images/img_87.png"></image>
				<view>
					<text>待买家响应</text>
					<view class="wait">已等待：<text><u-count-down :time="7* 60 * 60 * 1000" format="HH:mm:ss:SSS" autoStart millisecond></u-count-down></text></view>
					<view class="wait wait01">已超时</view>
					<view class="wait wait02">申诉属性：超时未确认</view>
				</view>
			</view>
			<view class="palce">
				<view>150 ADC<text>购买数量</text></view>
				<view class="on">1030.50 CNY<text>支付金额</text></view>
			</view>
			
			<!--待响应start-->
			<view v-show="show_dxy">
				<view class="tab_order">
					<view class="active">订单详情</view>
					<view class="disable">付款账号</view>
					<view class="disable">付款凭证</view>
				</view>
				<view>
					<view class="detial_list">
						<view>单价<text>1ADC = 6.87 CNY</text></view>
						<view>购买数量<text>600 ADC</text></view>
						<view>支付金额<text>1030.50 CNY</text></view>
						<view>单号<text>220928100486366</text></view>
						<view>订单日期<text>2022-09-10 14:43:08</text></view>
					</view>
				</view>
			</view>
			<!--待响应end-->
			
			<!--待付款start-->
			<view v-show="show_dfk">
				<view class="tab_order">
					<view :class="dfkIndex==0?'active':''" @click="dfk_Index(0)">订单详情</view>
					<view :class="dfkIndex==1?'active':''" @click="dfk_Index(1)">付款账号</view>
					<view :class="dfkIndex==2?'active':''" @click="dfk_Index(2)">付款凭证</view>
				</view>
				<view v-show="dfkIndex == 0">
					<view class="detial_list">
						<view>单价<text>1ADC = 6.87 CNY</text></view>
						<view>购买数量<text>600 ADC</text></view>
						<view>支付金额<text>1030.50 CNY</text></view>
						<view>单号<text>220928100486366</text></view>
						<view>订单日期<text>2022-09-10 14:43:08</text></view>
					</view>
				</view>
				<view v-show="dfkIndex == 1">
					<view class="order_list">
						<view>
							<image src="/static/images/do_01.png" mode="widthFix" class="img"></image>
							<text>赵本山</text>
						</view>
						<view>
							<image src="/static/images/do_02.png" mode="widthFix" class="img"></image>
							<view @tap="open_skm_box">收款码</view>
							<text class="on">13509843556</text>
						</view>
						<view>
							<image src="/static/images/do_03.png" mode="widthFix" class="img"></image>
							<view @tap="open_skm_box_wx">收款码</view>
							<text class="on">Zhanbenshan</text>
						</view>
						<view>
							<image src="/static/images/do_04.png" mode="widthFix" class="img"></image>
							<text>中国农业银行</text>
						</view>
						<view>
							<image src="/static/images/do_05.png" mode="widthFix" class="img"></image>
							<text class="on">95599 8008 56473 54895</text>
						</view>
						<view>
							<image src="/static/images/do_06.png" mode="widthFix" class="img"></image>
							<text class="ons">13509843556</text>
						</view>
					</view>
				</view>
				<view v-show="dfkIndex == 2">
					<view class="dfk_upload">
						<view class="img_list">
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"  multiple :maxCount="10"></u-upload>
						</view>
						<view class="dfk_intro">上传付款凭证请务必仔细核对，以免传错图片带来不必要的麻烦，恶意伪造付款凭证将永久冻结账户。</view>
					</view>
					<view class="f_btn">
						<button class="submit on">上传</button>
						<u-safe-bottom></u-safe-bottom>
					</view>
				</view>
			</view>
			<!--待付款end-->
			<!--交易完成start-->
			<view v-show="show_jywc">
				<view class="tab_order">
					<view :class="dfkIndex==0?'active':''" @click="dfk_Index(0)">订单详情</view>
					<view class="disable">付款账号</view>
					<view :class="dfkIndex==2?'active':''" @click="dfk_Index(2)">付款凭证</view>
				</view>
				<view v-show="dfkIndex == 0">
					<view class="detial_list">
						<view>单价<text>1ADC = 6.87 CNY</text></view>
						<view>购买数量<text>600 ADC</text></view>
						<view>支付金额<text>1030.50 CNY</text></view>
						<view>单号<text>220928100486366</text></view>
						<view>订单日期<text>2022-09-10 14:43:08</text></view>
					</view>
				</view>
				<view v-show="dfkIndex == 2">
					<view class="dfk_upload">
						<view class="img_list imgs">
							<u-album :urls="urls1" keyName="src2" singleSize="217rpx" multipleSize="217rpx" space="12rpx"></u-album>
						</view>
					</view>
				</view>
			</view>
			<!--交易完成end-->
			
			
		</view>
		<!--详情end-->
		
		<!--撤销弹窗start-->
		<u-popup mode="bottom" :show="revoke_box" :closeOnClickOverlay="true" @close="revoke_box_close">
			<view class="detial_box">
				<view class="tit">您正在撤销订单！<image src="/static/images/img_31.png" mode="widthFix" @click="revoke_box_close"></image></view>
				<view class="detial_check">
					<u-checkbox-group>
						<u-checkbox shape="square" label="" activeColor="#332C2B" checked></u-checkbox>
					</u-checkbox-group>
					<view class="con">购买订单每<text>48</text>小时只能撤销一次，请谨慎操作！</view>
				</view>
				<view class="btn">
					<button class="submit on" @click="revoke_box_close">删除</button>
				</view>
			</view>
		</u-popup>
		<!--撤销弹窗end-->
		
		<!--收款码弹窗start-->
		<u-popup mode="center" :show="skm_box" :closeOnClickOverlay="true" @close="skm_popup_close" customStyle="background: none">
			<view class="skm_box">
				<view class="skm_con">
					<image src="/static/images/img_76.png" mode="widthFix" class="img_con"></image>
				</view>
				<view class="skm_btn">
					<view @tap="skm_popup_close"><image src="/static/images/img_39.png" mode="widthFix"></image>关闭</view>
					<view @tap="skm_popup_close"><image src="/static/images/img_40.png" mode="widthFix"></image>保存</view>
				</view>
			</view>
		</u-popup>
		<u-popup mode="center" :show="skm_box_wx" :closeOnClickOverlay="true" @close="skm_wx_popup_close" customStyle="background: none">
			<view class="skm_box">
				<view class="skm_con">
					<image src="/static/images/img_78.png" mode="widthFix" class="img_con"></image>
				</view>
				<view class="skm_btn">
					<view @tap="skm_wx_popup_close"><image src="/static/images/img_39.png" mode="widthFix"></image>关闭</view>
					<view @tap="skm_wx_popup_close"><image src="/static/images/img_40.png" mode="widthFix"></image>保存</view>
				</view>
			</view>
		</u-popup>
		<!--收款码弹窗end-->
		
		<!--删除图片提示start-->
		<u-modal :show="del_tips" :confirmText="confirmText" showCancelButton :cancelText="cancelText" confirmColor="#E85B3E" cancelColor="#757475" @confirm="confirm" @cancel="cancel">
			<view class="box_content">
				<image src="/static/images/img_10.png" mode="widthFix" class="b_img"></image>
				<view class="slot-content">
					<rich-text :nodes="content"></rich-text>
				</view>
			</view>
		</u-modal>
		<!--删除图片提示end-->
		
		<!--解除交易start-->
		<u-popup mode="bottom" :show="termination_box" :closeOnClickOverlay="true" @close="termination_box_close">
			<view class="detial_box">
				<view class="tit">您正在解除交易！<image src="/static/images/img_31.png" mode="widthFix" @click="termination_box_close"></image></view>
				<view class="ter_check">
					<u-radio-group>
						<u-radio  activeColor="#332C2B" v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name"></u-radio>
					</u-radio-group>
				</view>
				<view class="ter_words">
					<u-textarea placeholder="请简要说明取消原因..." placeholderStyle="color:#A1A1A1"></u-textarea>
				</view>
				<view class="detial_check">
					<u-checkbox-group>
						<u-checkbox shape="square" activeColor="#332C2B" checked></u-checkbox>
					</u-checkbox-group>
					<view class="con">因“自身原因”解除交易的将扣除<text>2</text>分信誉值，连续两次“自身原因”或虚构“对方原因”解除交易的将冻结账户。</view>
				</view>
				<view class="btn btns">
					<button class="submit on" @click="open_termination_success_box">确定解除</button>
				</view>
			</view>
		</u-popup>
		<u-popup mode="bottom" :show="termination_success_box" :closeOnClickOverlay="true" @close="succees_termination_close" customStyle="background: none" >
			<view class="success_box">
				<text class="close" @tap="succees_termination_close"></text>
				<image src="/static/images/img_11.png"></image>
				<view class="con">解除成功<text></text></view>
				<view class="btn">
					<button class="submit on" @tap="succees_termination_close">查看订单</button>
					<u-safe-bottom customStyle="background: #FAFAFA"></u-safe-bottom>
				</view>
			</view>
		</u-popup>
		<!--解除交易end-->
		
		<!--申诉弹窗start-->
		<u-popup mode="bottom" :show="appeal_box" :closeOnClickOverlay="true" @close="appeal_box_close">
			<view class="detial_box">
				<view class="tit">超时未确认！<image src="/static/images/img_31.png" mode="widthFix" @click="appeal_box_close"></image></view>
				<view class="ter_check">
					<u-radio-group>
						<u-radio  activeColor="#332C2B" v-for="(item, index) in radiolist2" :key="index" :label="item.name" :name="item.name"></u-radio>
					</u-radio-group>
				</view>
				<view class="ter_words">
					<u-textarea v-model="words" placeholder="请简要说明取消原因..." placeholderStyle="color:#A1A1A1"></u-textarea>
				</view>
				<view class="detial_check">
					<u-checkbox-group>
						<u-checkbox shape="square" activeColor="#332C2B" checked></u-checkbox>
					</u-checkbox-group>
					<view class="con">建议与付款人沟通后再进行此操作。恶意申诉，或申诉内容与实际情况不符的，将永久冻结账户。</view>
				</view>
				<view class="btn btns">
					<button class="submit on" @click="open_appeal_success_box">提交申诉</button>
				</view>
			</view>
		</u-popup>
		<u-popup mode="bottom" :show="appeal_success_box" :closeOnClickOverlay="true" @close="succees_termination_close" customStyle="background: none" >
			<view class="success_box">
				<text class="close" @tap="succees_termination_close"></text>
				<image src="/static/images/img_11.png"></image>
				<view class="con">提交成功<text>等待系统处理</text></view>
				<view class="btn">
					<button class="submit on" @tap="succees_termination_close">查看订单</button>
					<button class="back_btn" @tap="succees_termination_close">申诉记录</button>
					<u-safe-bottom customStyle="background: #FAFAFA"></u-safe-bottom>
				</view>
			</view>
		</u-popup>
		<!--申诉弹窗end-->
		
	</view>
</template>

<script>
	export default {
	    data() {
	        return {
				navIndex: 0,
				show_dxy:false, //待响应
				h_show_dxy:false,
				show_dfk: false, //待付款
				h_show_dfk: false,
				dfkIndex:0,
				revoke_box: false,  //撤销弹窗
				skm_box: false, //收款码
				skm_box_wx: false,
				fileList1: [{
					url:'/static/images/img_01.jpg'
				},{
					url:'/static/images/img_01.jpg'
				}],
				del_tips: false,
				content:'对方尚未确认收款，您确定要删除该<br/>图片？',
				confirmText:"删除",
				cancelText:"关闭",
				termination_box: false, //解除交易弹窗
				radiolist1: [{
					name: '自身原因',
				},{
					name: '对方原因',
				}],
				termination_success_box: false,
				h_show_ss: false, //申诉
				appeal_box: false,
				radiolist2: [{
					name: '卖家不予配合',
				},{
					name: '未联系卖家',
				},{
					name: '其他',
				}],
				words:'意为荣玩家服务的平台，因而是战想武装起新概念是用毛泽东思想武装起来的平台，是人全心全意为荣玩家服务的平台，',
				appeal_success_box: false,
				h_show_ssjl: false, //申诉记录
				h_show_zcmx: false, //资产明细
				show_jywc: false, //交易完成
				albumWidth: 0,
				urls1: [{
					src2: '/static/images/img_01.jpg',
				},{
					src2: '/static/images/img_43.png',
				},{
					src2: '/static/images/img_43.png',
				}],
	        }
	    },
		onLoad(option){
			if(option.status==1){
				this.show_dxy = true,
				this.h_show_dxy= true
			}else if(option.status==2){
				this.show_dfk = true,
				this.h_show_dfk= true
			}else if(option.status==3){
				this.show_dfk = true,
				this.h_show_ss = true
			}else if(option.status==4){
				this.show_dfk = true,
				this.h_show_ssjl = true
			}else if(option.status==5){
				this.show_jywc = true,
				this.h_show_zcmx = true
			}
			console.log(option.status)
		},
	    methods: {
			dfk_Index(index) {
				this.dfkIndex = index;
			},
			
			//撤销弹窗
			open_revoke_box(){
				this.revoke_box = true
			},
			revoke_box_close(){
				this.revoke_box = false
			},
			
			//收款码
			open_skm_box(){
				this.skm_box = true
			},
			skm_popup_close(){
				this.skm_box = false
			},
			open_skm_box_wx(){
				this.skm_box_wx = true
			},
			skm_wx_popup_close(){
				this.skm_box_wx = false
			},
			//解除交易
			open_termination_box(){
				this.termination_box = true
			},
			termination_box_close(){
				this.termination_box = false
			},
			open_termination_success_box(){
				this.termination_box = false,
				this.termination_success_box = true
			},
			succees_termination_close(){
				this.termination_success_box = false
			},
			//申诉
			open_appeal_box(){
				this.appeal_box = true
			},
			appeal_box_close(){
				this.appeal_box = false
			},
			open_appeal_success_box(){
				this.appeal_box = false,
				this.appeal_success_box = true
			},
			succees_termination_close(){
				this.appeal_success_box =false
			},
			
			//删除图片
			deletePic(event) {
				//this[`fileList${event.name}`].splice(event.index, 1)
				this.del_tips = true
				console.log(event)
			},
			confirm(){
				this.del_tips = false
			},
			cancel(){
				this.del_tips = false
			},
			//新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
	    },
		computed: {
			
		},
	}
</script>

<style lang="scss">
@import url("../../common/style.scss");
@import url("create.scss");
</style>